.like-button {
	align-items: center;
	display: inline-flex;
	padding: 4px;
	color: var( --color-text-subtle );
	position: relative;
	box-sizing: border-box;

	.gridicon {
		position: absolute;
		left: 0;
	}

	.gridicons-star {
		opacity: 0;
		pointer-events: none;
		fill: var( --color-primary );
		transform: scale( 4 ) rotate( 90deg );
	}

	&.is-animated .gridicons-star {
		transition: all 0.3s cubic-bezier( 0.175, 0.885, 0.32, 1.275 );
	}

	&.is-animated .gridicons-star-outline {
		transition: all 0.2s cubic-bezier( 0.175, 0.885, 0.32, 1.275 );
	}

	&:hover {
		cursor: pointer;
		color: var( --color-primary );
	}

	&.is-liked {
		color: var( --color-text-subtle );

		.gridicons-star {
			opacity: 1;
			fill: var( --color-primary );
			pointer-events: auto;
			transform: scale( 1 ) rotate( 0 );
		}

		.gridicons-star-outline {
			opacity: 0;
			pointer-events: none;
			fill: var( --color-primary );
			transform: translateX( -10px ) rotate( 1deg ) scale( 0.3 );
		}

		.like-button__label {
			color: var( --color-primary );
		}
	}

	&.has-count {
		&.has-label {
			.like-button__label-status::before {
				content: ' ';
			}
		}
	}

	@include breakpoint-deprecated( '<480px' ) {
		.like-button__label-status {
			display: none;
		}
	}
}

.like-button__label {
	// this keeps the label from collapsing and making the icon drop down
	margin-left: 1px;
	font-size: $font-body-small;
	min-width: 10px;
}
